<template>
	<nt-container bg-color="#fff" v-model="scrollHeight">
		<view class="commission">
			<view class="commission-bg">
				<image src="/static/image/commission.png" mode="widthFix"></image>
				<view class="commission-bg__count" v-for="(it, index) in commonForm.countList" :key="index">{{it.name}}：{{it.value}}</view>
			</view>
			<nt-form 
				:config="commonForm.formConf" 
				v-model="commonForm.searchValue" 
				@sonData="commonForm.sonData = $event" 
				:loading="commonForm.loading"
				:timeConf="commonForm.timeConf"
			></nt-form>
			<view class="commission-table" :style="{ height: `${scrollHeight - (scrollHeight / 2)}px` }">
				<nt-table
					:columns="commonForm.columns" 
					:table-data="commonForm.tableData"
					v-model="commonForm.loading"
					:finished="commonForm.finished"
					@scrolltolower="getCommonFormList"
					@refresherrefresh="formInit"
				></nt-table>
			</view>
		</view>
	</nt-container>
</template>

<script>
import dayjs from "dayjs"
import FormMixins from "@/mixins/formMixins"
export default {
	mixins: [FormMixins],
	data(){
		return {
			date: dayjs().format("YYYY-MM-DD"),
			show: false,
			commonFormFuntype: "UserCash",
			scrollHeight: 0,
		}
	},
	onLoad(options){
		this.formInit()
	},
	methods: {
		
	}
}
</script>

<style scoped lang="scss">
.commission{
	padding: 20rpx;
	box-sizing: border-box;
	background: linear-gradient(to bottom, #ECF3FB, #fff);
	&-bg{
		margin: -80rpx -20rpx 20rpx;
		position: relative;
		image{
			width: 100%;
			vertical-align: middle;
		}
		&__count{
			position: absolute;
			bottom: 40rpx;
			left: 55rpx;
			z-index: 0;
			color:#1E3C68;
			font-size: 30rpx;
		}
		
	}
	&-screen{
		margin-bottom: 20rpx;
		&__date{
			height: 70rpx;
			line-height: 70rpx;
			width: 100%;
			font-size: 30rpx;
			color:#333;
			padding: 0 40rpx;
			border-radius: 10rpx;
			position:relative;
			background:#DFE8F5;
			display: block;
			box-sizing: border-box;
			.iconfont{
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
	&-table{
		margin-top: 30rpx;
	}
}
</style>